<template>
  <scroll
      :data="detail"
      :pullUpLoad="true"
      :pullUpText="false"
      :bounce="false"
      :listingScroll="true"
      @touchStart="touchStart"
      @scroll="scroll"
      :probeType="3"
      @pullingUp="loadMore"
      ref="scroll">
    <swiper :list="detail.banner" @touchEnd="touchEnd"></swiper>
    <div class="detail-message">
      <div class="info">
        <span class="price">￥<em>{{detail.price}}</em></span>
        <span class="sales">已售 {{detail.sales}}</span>
      </div>
      <div class="title">
        <h2>{{detail.title}}</h2>
        <div class="desc">
          {{detail.desc}}
        </div>
      </div>
      <div class="postage">
        <span v-for="item in detail.fav" :key="item.id">
          <i class="icon" :class="{'icon-truck':item.type===1,'icon-coin-euro':item.type===2}"></i>{{item.name}}
        </span>
      </div>
    </div>
    <div class="detail-evaluate">
      <div class="title">评价</div>
      <evaluate-list :list="detail.evaluate"></evaluate-list>
      <div class="btn">
        <mt-button type="default" class="more-btn" @click="moreEvaluateList">查看更多</mt-button>
      </div>
    </div>
    <div class="jx-info">{{upText}}</div>
  </scroll>
</template>

<script>
  import swiper from '@/components/banner/swiper';
  import scroll from '@/components/scroll/scroll';
  import evaluateList from '@/components/evaluate-list/evaluate-list'

  export default {
    props: {
      detail: Object
    },
    data() {
      return {
				upText: '继续拖拽查看详情'
      }
    },
    mounted() {
      setTimeout(() => {
				this.$refs.scroll && this.$refs.scroll.refresh();
      }, 20);
    },
    methods: {
      touchStart(e) {
        // 阻止swiper上下滚动事件
        e.stopPropagation();
      },
      touchEnd() {
        this.$emit('touchEnd');
      },
      scroll(y) {
        this.$emit('scroll', y);
      },
      moreEvaluateList() {
        this.$emit('moreEvaluateList');
      },
      loadMore() {
        if (this.loadMoreStatus === true) {
          this.$emit('loadMore', 1);
          this.loadMoreStatus = false;
        } else {
          this.loadMoreStatus = true;
        }
				this.$refs.scroll &&  this.$refs.scroll.finishPullUp();
      }
    },
    components: {
      swiper,
      scroll,
      evaluateList
    }
  }
</script>

<style scoped lang="less">
  @import '../../common/less/variable';

  .scroll {
    position: absolute;
    width: 100%;
    top: 0;
    left: 0;
    bottom: 0;
    overflow: hidden;
    -webkit-overflow-scrolling: touch;
  }

  .jx-info {
    padding: 15px 0;
    text-align: center;
    font-size: @font-size-medium;
  }

  .detail-message {
    padding: 10px;
    background-color: @color-background-l;
    .info {
      display: flex;
      padding: 5px 0 12px 0;
      justify-content: space-between;
      align-items: flex-end;
      .price {
        font-weight: bold;
        color: @color-text-t;
        font-size: @font-size-medium-x;
        em {
          font-weight: bold;
          font-style: normal;
          font-size: @font-size-large-l;
        }
      }
      .sales {
        font-size: @font-size-small;
        font-weight: bold;
      }
    }
    .title {
      line-height: 1.2em;
      h2 {
        color: @color-text-b;
        padding: 5px 0;
        font-size: @font-size-medium-x;
        font-weight: bold;
      }
      .desc {
        padding: 2px 0;
        font-size: @font-size-medium;
        color: @color-text;
      }
    }
    .postage {
      margin: 10px 0;
      display: flex;
      justify-content: flex-start;
      font-size: @font-size-medium;
      span {
        color: @color-text-t;
        i {
          padding-right: 3px;

        }
        padding-right: 15px;
      }
    }
  }

  .detail-evaluate {
    margin-top: 10px;
    padding: 10px 10px 20px 10px;
    background-color: @color-background-l;
    .title {
      padding: 10px 0 10px 0;
    }
    .btn {
      text-align: center;
      margin-top: 5px;
    }
    .more-btn {
      border-radius: 30px;
      padding: 0 25px;
      height: 25px;
      background-color: @color-background-l;
      font-size: @font-size-medium;
    }
  }
</style>
